<swiper *ngIf="swiperOptions$ | async as options" class="w-full h-full"
  [effect]="options.effect ?? 'slide'"
  [creativeEffect]="options.creativeEffect ?? {}"
  [direction]="options.direction"
  [slidesPerView]="options.slidesPerView"
  [spaceBetween]="options.spaceBetween"
  [centeredSlides]="options.centeredSlides"
  [grabCursor]="options.grabCursor"
  [mousewheel]="options.mousewheel"
  [loop]="options.loop"
  [autoplay]="options.autoplay ?? false"
  [virtual]="options.virtual"
  [breakpoints]="breakpoints$ | async"
  [pagination]="options.pagination"
  [initialSlide]="0"
  [keyboard]="options.keyboard"
  [touchMoveStopPropagation]="true"
  [touchStartForcePreventDefault]="true"
  (touchstart)="swipe($event, 'start')"
  (touchend)="swipe($event, 'end')">

  <ng-template swiperSlide *ngFor="let slide of slides$ | async; trackBy: trackByKey">
    <div class="pac-swiper__slide w-full h-full" [ngStyle]="slideStyling$()"
      [ngSwitch]="slide.type">

      <pac-indicator-card *ngSwitchCase="IndicatorCardWidgetType.IndicatorCard" class="w-full h-full"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [styling]="styling"
        [ngStyle]="slide.options?.styling?.widget"
        [slicers]="slicers"
      >
      </pac-indicator-card>

      <pac-widget-analytical-card *ngSwitchCase="WidgetComponentType.AnalyticalCard" class="w-full h-full"
        [title]="slide.options?.title"
        [dataSettings]="slide.options?.dataSettings"
        [chartSettings]="slide.options?.chartSettings"
        [options]="slide.options?.options"
        [styling]="styling"
        [ngStyle]="slide.options?.styling?.widget"
        [slicers]="slicers"
      >
      </pac-widget-analytical-card>

      <pac-widget-analytical-grid *ngSwitchCase="WidgetComponentType.AnalyticalGrid" class="w-full h-full"
        [title]="slide.options?.title"
        [dataSettings]="slide.options?.dataSettings"
        [options]="slide.options?.options"
        [styling]="styling"
        [ngStyle]="slide.options?.styling?.widget"
        [slicers]="slicers"
      >
      </pac-widget-analytical-grid>
    </div>
  </ng-template>

</swiper>

<div *ngIf="editable && (slides$ | async | isNil)" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
  <pac-placeholder-add></pac-placeholder-add>
  <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.Swiper.Title' | translate: {Default: 'Swiper'} }}</span>
</div>
